<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="loginForm">
    <el-form-item prop="account">
      <el-input type="text" v-model.trim="ruleForm.account" @keyup.enter.native="handleSubmit" auto-complete="off"
        placeholder="请输入账号">
        <img src="@/assets/login/zh.png" alt="" slot="prefix">
      </el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" @keyup.enter.native="handleSubmit" v-model.trim="ruleForm.checkPass" auto-complete="off"
        placeholder="请输入密码">
        <img src="@/assets/login/mm.png" alt="" slot="prefix">
      </el-input>
    </el-form-item>
    <el-form-item prop="kaptcha" class="kaptcha">
      <el-input type="text" @keyup.enter.native="handleSubmit" v-model.trim="ruleForm.kaptcha" auto-complete="off"
        placeholder="请输入验证码">
      </el-input>
      <img @click="kaptcha" :src="imgSrc" alt="" />
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button type="primary"
        style="width: 100%; margin-top: 15px;background: #2165F6!important;border-radius: 10px;height:68px;font-size: 26px;font-family: Source Han Sans CN;font-weight: bold;"
        @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
    </el-form-item>

    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
  </el-form>
</template>

<script>
import { mapActions } from "vuex";
import formMinxin from "./minxins/formMinxin.js";
import CryptoJS from "crypto-js/crypto-js";
import config from "@/config";
import router from "@/router";
import { getOtherToken, setOtherToken } from "@/utils/auth";
import { kaptcha } from "@/api/login";
import { encrypt } from '@/utils/util'
export default {
  mixins: [formMinxin],
  props: {
    crypType: {
      type: String,
      default: null
    },
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        // } else if (!this.regexSets.passReg.test(value)) {
        //   callback(new Error("用户密码不正确"));
      } else {
        callback();
      }
    };
    return {
      logining: false,
      imgSrc: "",
      ruleForm: {
        account: "",
        checkPass: "",
        kaptcha: "",
        kaptchaKey: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        kaptcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      checked: true,
    };
  },
  created() {
    this.kaptcha();
    let user_cookie = this.getCookie("user_cookie")
      ? this.getCookie("user_cookie").toString()
      : "";
    if (user_cookie) {
      let { account, checkPass } = JSON.parse(
        CryptoJS.AES.decrypt(user_cookie, config.secret).toString(
          CryptoJS.enc.Utf8
        )
      );
      this.ruleForm.account = account;
      this.ruleForm.checkPass = checkPass;
    }
  },
  methods: {
    ...mapActions(["handleLogin", 'resetViews']),
    handleSubmit(ev) {
      let me = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          let loginParams = {
            userName: this.ruleForm.account,
            password: this.ruleForm.checkPass,
            subSystem: '',
            kaptcha: this.ruleForm.kaptcha,
            kaptchaKey: this.ruleForm.kaptchaKey,
            //password: this.md5(this.ruleForm.checkPass)
          };
          if (this.crypType == 'sm4') {
            // const SM4 = require("gm-crypt").sm4;
            // let sm4Config = {
            //   key: "4120356091247385",
            //   mode: "ecb",
            //   cipherType: "base64"
            // };
            // let sm4 = new SM4(sm4Config);
            // loginParams.password = sm4.encrypt(loginParams.password);
            loginParams.password = encrypt(loginParams.password)
          }
          this.handleLogin(loginParams)
            .then(() => {
              if (this.checked) {
                this.setCookie(
                  "user_cookie",
                  CryptoJS.AES.encrypt(
                    JSON.stringify(this.ruleForm),
                    config.secret
                  ),
                  30
                );
              } else {
                this.setCookie("user_cookie", "");
              }
              // this.resetViews();
              this.$router.push('/');
            })
            .catch((err) => {
              this.kaptcha();
              this.logining = false;
            });
        } else {
          return false;
        }
      });
    },
    kaptcha() {
      kaptcha().then((data) => {
        this.imgSrc = "data:image/jpeg;base64," + data.data.base64;
        this.ruleForm.kaptchaKey = data.data.kaptchaKey;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.loginForm {
  .el-input-group__append {
    padding: 0;

    img {
      height: 30px;
    }
  }

  .remember {
    display: block;
    margin-top: -5px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 32px;
}

::v-deep .el-input__inner {
  height: 68px !important;
  line-height: 68px !important;
  background: #EAF4FE;
  border-radius: 10px;
  font-size: 20px;
}

::v-deep .el-input__prefix {
  display: flex;
  align-items: center;
  margin-left: 41px;
}

::v-deep .el-input--prefix .el-input__inner {
  padding-left: 91px;
}

::v-deep .el-checkbox__label {
  font-size: 20px;
  color: #5A5A5A;
}

::v-deep .el-checkbox__inner {
  width: 18px;
  height: 18px;
}

::v-deep .el-checkbox__inner::after {
  top: 3px;
  left: 6px;
}

.kaptcha {
  position: relative;

  img {
    position: absolute;
    right: 20px;
    width: 81px;
    height: 33px;
    top: 18px;
  }

  ::v-deep .el-input__inner {
    padding-left: 41px;
  }
}
</style>